<template>
  <div id="home">
    <nav-bar class="home-nav">
      <template v-slot:center>
        <div>蘑菇街</div>
      </template>
    </nav-bar>
    <!-- 定义另一个tabControl实现吸顶效果 -->
    <tab-control
      v-show="isTabFixed"
      ref="tabControl1"
      :titles="['流行', '新款', '精选']"
      class="tab-control"
      @tabClick="tabClick"
    ></tab-control>
    <scroll
      ref="scroll"
      class="content"
      :probe-type="3"
      :pull-upload="true"
      @scroll="controlScroll"
      @pullingUp="loadMore"
    >
      <div class="banner">
        <swiper
          v-if="banners.length > 0"
          ref="mySwiper"
          :options="swiperOption"
        >
          <swiper-slide v-for="(item, index) in banners" :key="index">
            <a :href="item.link">
              <img :src="item.image" alt="" @load="imgLoad" />
            </a>
          </swiper-slide>
          <div slot="pagination" class="swiper-pagination"></div>
        </swiper>
      </div>
      <recomend-view :recomends="recommends"></recomend-view>
      <feature-view></feature-view>
      <tab-control
        ref="tabControl2"
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
      ></tab-control>
      <goods-list :goods="goods[goodsType].list"></goods-list>
    </scroll>
    <!-- 监听组件原生事件要加native -->
    <back-top v-show="isShowBackTop" @click.native="backClick"></back-top>
  </div>
</template>

<script>
/* eslint-disable */
import NavBar from "../components/common/NavBar.vue";
import { getHomeMultidata, getHomeGoods } from "../network/home";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import RecomendView from "../components/home/RecomendView.vue";
import FeatureView from "../components/home/FeatureView.vue";
import TabControl from "../components/content/TabControl/TabControl.vue";
import GoodsList from "../components/content/goods/GoodsList.vue";
import Scroll from "../components/common/scroll/Scroll";
import BackTop from "../components/content/BackTop/BackTop.vue";

export default {
  name: "Home",
  components: {
    NavBar,
    swiper,
    swiperSlide,
    RecomendView,
    FeatureView,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      goodsType: "pop",
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
      },
      isShowBackTop: false,
      isLoad: false,
      tabOffsetTop: 0,
      isTabFixed: false,
    };
  },
  created() {
    this.getHomeMultidata();
    this.getHomeGoods("sell");
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    // 有图片加载，就调用refresh函数重新计算滚动区域的高度
  },
  mounted() {
    // 使用防抖函数封装refresh，防止多次执行
    const refresh = this.debounce(this.$refs.scroll.refresh, 100);
    this.$bus.$on("imageLoad", () => {
      refresh();
    });
  },
  methods: {
    // 网络请求相关方法
    getHomeMultidata() {
      // 发送轮播图和推荐栏请求
      getHomeMultidata().then((res) => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      // 发送商品请求
      getHomeGoods(type, page).then((res) => {
        // 将请求到的数据加入数组，且页数+1好请求下一页数据
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
      });
    },
    // 事件监听相关方法
    tabClick(index) {
      // 当前点击的商品类型
      switch (index) {
        case 0:
          this.goodsType = "pop";
          break;
        case 1:
          this.goodsType = "new";
          break;
        case 2:
          this.goodsType = "sell";
          break;
      }
      // 使两个tabControl的商品类型保持一致
      this.$refs.tabControl1.currentIndex = index;
      this.$refs.tabControl2.currentIndex = index;
    },
    backClick() {
      // 滚回顶部scrollTo(位置x，位置y，滚动时间)
      this.$refs.scroll.scroll.scrollTo(0, 0, 500);
    },
    controlScroll(position) {
      // 如果滚动到指定位置则显示回到顶部按钮
      this.isShowBackTop = position.y < -1000 ? true : false;
      // 决定tabControl是否吸顶
      this.isTabFixed = -position.y > this.tabOffsetTop ? true : false;
    },
    loadMore() {
      this.getHomeGoods(this.goodsType);
      // 加载完后需要finishi一下才能继续加载
      this.$refs.scroll.scroll.finishPullUp();
    },
    // 防抖函数
    debounce(func, delay) {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    },
    imgLoad() {
      // 获取TabControl的offsetTop
      if (!this.isLoad) {
        this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
      }
      this.isLoad = true;
    },
  },
};
</script>

<style scoped>
#home {
  height: 100vh;
  position: relative;
}
.home-nav {
  /* --color-tint是在base.css中定义的变量 */
  background-color: var(--color-tint);
  color: white;
  z-index: 9;
  width: 100%;
  top: 0;
}
.content {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
.banner .swiper-container {
  width: 100%;
  height: 180px;
}
.banner img {
  width: 100%;
  height: 100%;
}
.tab-control {
  position: relative;
  z-index: 10;
}
</style>